import { ISchemaInfo } from 'src/components/QueryForm';
import { Avatar, Tag } from 'antd';
import { IRoleRespData } from 'src/interface';

export const schemas: ISchemaInfo[] = [
  {
    name: 'username',
    label: '用户名',
    component: 'Input',
    componentProps: {
      placeholder: '请输入角色名称',
    },
  },
];

export const columns = [
  {
    title: '登录用户',
    dataIndex: 'username',
    key: 'username',
    width: 150,
  },
  {
    title: '用户头像',
    dataIndex: 'avatar',
    key: 'avatar',
    width: 100,
    render: (text: string) => {
      return <Avatar src={text}></Avatar>;
    },
  },
  {
    title: '用户昵称',
    dataIndex: 'nickname',
    key: 'nickname',
    width: 150,
    ellipsis: {
      showTitle: true,
    },
  },
  {
    title: '手机号',
    dataIndex: 'mobile',
    key: 'mobile',
    width: 150,
  },
  {
    title: '邮箱',
    dataIndex: 'email',
    key: 'email',
    width: 150,
  },
  {
    title: '所属部门',
    dataIndex: 'deptName',
    key: 'deptName',
    width: 200,
  },
  {
    title: '所属角色',
    dataIndex: 'roleList',
    key: 'roleList',
    width: 200,
    render: (text: IRoleRespData[]) => {
      return (
        <div className="flex flex-wrap">
          {text.map((item: IRoleRespData) => {
            return (
              <Tag key={item.roleId} color="blue" className="ml-[4px] mt-[4px]">
                {item.roleName}
              </Tag>
            );
          })}
        </div>
      );
    },
  },
  {
    title: '性别',
    dataIndex: 'sex',
    key: 'sex',
    width: 100,
    render: (text: number) => {
      return text ? (Number(text) ? '男' : '女') : '未知';
    },
  },
  {
    title: '使用状态',
    dataIndex: 'status',
    key: 'status',
    width: 100,
    render: (text: number) => {
      return (
        <div className="relative">
          <div className="absolute left-[0px] top-1/2 -mt-[4px]">
            <span className="relative flex h-[8px] w-[8px]">
              <span
                className={`animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 ${text ? 'bg-green-400' : 'bg-red-400'}`}></span>
              <span
                className={`relative inline-flex rounded-full h-[8px] w-[8px] ${text ? 'bg-green-500' : 'bg-red-500'}`}></span>
            </span>
          </div>
          <div className="ml-[12px]">{text ? '启用' : '禁用'}</div>
        </div>
      );
    },
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    width: 150,
  },
];
